<template>
  <div class="list" :style="{marginBottom:size}">
    <div v-if="!show" class="loading">
            <img src="../assets/images/loading.gif" alt="">
    </div>
    <div v-else>      
      <div class="listSty" @click="toMusicDetailsList('hotMusicData')">
        <div class="hot-pic">
          <img :src="hotPicUrl" alt="">
          <p>每周四更新</p>
        </div>
        <div class="pre">
          <div class="preMusec" v-for="(item, index) in threeHotMusic" :key="index">{{index+1}}.{{item.name}}</div>
        </div>
      </div>
      <div class="listSty" @click="toMusicDetailsList('hiMusicData')">
        <div class="hot-pic">
          <img :src="hiPicUrl" alt="">
          <p>每周五更新</p>
        </div>
        <div class="pre">
          <div class="preMusec" v-for="(item, index) in threeHiMusic" :key="index">{{index+1}}.{{item.name}}</div>
        </div>
      </div>
      <div class="listSty" @click="toMusicDetailsList('surMusicData')">
        <div class="hot-pic">
          <img :src="surPicUrl" alt="">
          <p>每天更新</p>
        </div>
        <div class="pre">
          <div class="preMusec" v-for="(item, index) in threeSurMusic" :key="index">{{index+1}}.{{item.name}}</div>
        </div>
      </div>
    </div>
    <div class="re_music_list_bottom">
        <p>原创音乐排行榜</p>
      </div>
      <div class="songs-list-box">
        <div class="songs-list" @click="toSong(item.id,idx)" v-for="(item, idx) in oriMusic" :key="idx">
          <div class="songs-list-left">
            <h3>{{ item.name}}</h3>             
            <div>
              <span>SQ</span>
              <p v-for="(item1,idx1) in item.ar" :key="idx1">{{item1.name}}</p>
            </div>
          </div>
          <div class="songs-list-right">
            <i class="iconfont">&#xe696;</i>
          </div>
        </div>
    </div>
    <div class="remind" @click="toApp">
      点击下载APP,查看更多音乐
    </div>
  </div>
</template>

<script>
import { getHotMusic,getHiMusic,getSurgeMusic,getOriginalMusic } from "../assets/api";
export default {
  name: 'HotMusicList',
  data() {
    return {     
      size:'', 
      hotPicUrl:null,
      hotMusic:[],
      hiPicUrl:null,
      hiMusic:[],
      surPicUrl:null,
      surMusic:[],
      oriMusic:[],
      show:false
    }
  },
  async created() {
    //获取热歌榜信息
    let hotMusicData = await getHotMusic()
    this.hotPicUrl = hotMusicData.coverImgUrl
    this.hotMusic = hotMusicData.tracks

    //获取电音榜信息
    let hiMusicData = await getHiMusic()
    this.hiPicUrl = hiMusicData.coverImgUrl
    this.hiMusic = hiMusicData.tracks

    //获取飙升榜信息
    let surMusicData = await getSurgeMusic()
    this.surPicUrl = surMusicData.coverImgUrl
    this.surMusic = surMusicData.tracks

    //获取原创音乐榜信息
    let oriMusicData = await getOriginalMusic()
    this.oriMusic = oriMusicData.tracks.slice(0,20)

    this.show = true
  },
  computed: {
      threeHotMusic(){
        return this.hotMusic.slice(0,3)
      },
      threeHiMusic(){
        return this.hiMusic.slice(0,3)
      },
      threeSurMusic(){
        return this.surMusic.slice(0,3)
      },
      
  },
  methods:{
    //跳到歌曲详细页面
    toMusicDetailsList(str){
        this.$router.push({
          name:'detailsList',
          query:{
            id:str
          }
        });
        this.$store.commit("hotMusic",{
          music:this.hotMusic,
          musicImg:this.hotPicUrl
        })   
        this.$store.commit("hiMusic",{
          music:this.hiMusic,
          musicImg:this.hiPicUrl
        })
        this.$store.commit("surMusic",{
          music:this.surMusic,
          musicImg:this.surPicUrl
        }) 
    }, 
    //跳到播放页面
    toSong(id,idx){
        // console.log(id,idx)
        // 数据传入vuex
        var b = [];
        this.oriMusic.forEach(item =>{
            var songs = {
                id: item.id,
                name: item.name,
                artists: this.arti(item.ar),
                picurl: item.al.picUrl
            };
            b.push(songs);
        })


        this.$store.commit("toSongList",b)
        this.$store.commit("songsIdx",idx)

        // 显示音乐控制台
        this.size = '6vh'
        this.$root.$children[0].$refs.controlers.style.display = "block"
        // console.log(this.$root.$children)
    },
    //处理歌手
    arti(arr) {
        var a = [];
        arr.forEach(item =>{
            a.push(item.name);
        })
        return a;
    },

    toApp(){
        this.$router.push({
            name:'Down_load'
        })
    },
  }
}
</script>

<style lang="scss">
  @import "../assets/scss/HotMusicList.scss"
</style>
